<template>
    <div>
        <div>
            <el-button type="primary" @click="dialogFormVisible=true">上传图片</el-button>
        </div>
        <template>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="图片编号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="storeid"
                        label="分店ID"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图片备注"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="图片地址"
                        width="200">
                    <template slot-scope="scope">
                        <img :src="scope.row.path" width="100px" height="100px">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="图片状态"
                        width="120">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.state">
                            <el-option v-for="s in tableDatas"
                                       :key="s"
                                       :label="s.name"
                                       :value="s.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <!--具体操作-->
                        <el-button type="primary" @click="updatestate(scope.row)" icon="el-icon-edit"
                                   circle></el-button>
                        <el-button type="danger" @click="handleRemove(scope.row)" icon="el-icon-delete"
                                   circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog title="上传图片" :visible.sync="dialogFormVisible">
            <el-upload
                    class="upload-demo"
                    ref="submitUpload"
                    action=""
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-change="changeImage"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-exceed="ceshi"
                    :limit="4"
                    list-type="picture-card">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div style="margin-top: 10px">
                    <el-button slot="trigger" size="small" type="primary" @click="classListUpload">清空上传列表</el-button>
                    <el-button slot="trigger" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                </div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "addslideshow",
        data() {
            return {
                dialogFormVisible: false,
                formLabelWidth: '120px',
                dialogVisible: false,
                form: {
                    name: '',
                    region: ''
                },
                fileList: [],
                bannar: {
                    storeid: '',
                    name: '',
                    path: '',
                    state: ''
                },
                client: '',
                storeAs: '',
                tableData: [],
                tableDatas: [{
                    name: '禁用',
                    value: 0
                }, {
                    name: '启用',
                    value: 1
                }],
                storeid: 1,

            };
        },
        created() {
            if (this.size) {
                this.fileSize = this.size;
            }
            this.client = new OSS.Wrapper({
                region: 'oss-cn-beijing',
                secure: true,
                accessKeyId: 'LTAIEoxh8ELxVKsZ',
                /*这两者到阿里云控制台获得*/
                accessKeySecret: '0FDENm0c37Jk1W9BZoMoN5ly7MCI4O',
                bucket: 'gdtc-picture' /*装图片的桶名*/
            });
            this.axios.post("/FeignBannerController/QueryAllBanner", this.storeid).then(response => {
                if (response.data == null) {
                    this.$alert("图片为空");
                } else {
                    this.tableData = response.data;
                }
            })
        },
        methods: {
            //上传到服务器地址
            /**上传图片**/
            submitUpload: function () {
                for (var i = 0; i < this.fileList.length; i++) {
                    this.storeAs = '/bannar/';
                    var file = this.fileList[i].raw;
                    var type = this.fileList[i].name.split('.')[1];
                    this.storeAs += this.getUuid() + '.' + type;
                    if (file.size > 1000000) {
                        this.$message('亲,图片不能超过!' + this.fileSize / 1000 + 'kb');
                        return false;
                    }
                    this.client.multipartUpload(this.storeAs, file)
                        .then(result => {
                            this.bannar.name = result.name;
                            this.bannar.path = 'https://' + result.bucket + '.oss-cn-beijing.aliyuncs.com' + result.name;
                            this.bannar.storeid = 1;
                            this.bannar.state = 0;
                            this.axios.post("/FeignBannerController/InsBanner", this.bannar)
                                .then((response) => {
                                    if (response.data == 1) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                        this.dialogFormVisible = false;
                                        this.axios.post("/FeignBannerController/QueryAllBanner", this.storeid).then(response => {
                                            if (response.data == null) {
                                                this.$alert("图片为空");
                                            } else {
                                                this.tableData = response.data;
                                            }
                                        });
                                    } else {
                                        this.$message.error('添加失败');
                                    }
                                })
                        })
                        .catch(err => {
                            this.$message.error("Error:" + err);
                        });
                }

            },
            getUuid: function () {
                var len = 32; //32长度
                var radix = 16; //16进制
                var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
                var uuid = [],
                    i;
                radix = radix || chars.length;
                if (len) {
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                } else {
                    var r;
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r = 0 | Math.random() * 16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
                }
                return uuid.join('');
            },
            //清空上传列表
            classListUpload() {
                this.$refs.upload.clearFiles()
            },
            //删除一个图
            handleRemove(row) {
                var phonto = row.id;
                this.axios.post("/FeignBannerController/DelBanner", phonto).then(response => {
                    if (response.data == null && response.data == 0) {
                        this.$alert("删除失败");
                    } else {
                        this.$alert("删除成功");
                        this.axios.post("/FeignBannerController/QueryAllBanner", this.storeid).then(response => {
                            if (response.data == null) {
                                this.$alert("图片为空");
                            } else {
                                this.tableData = response.data;
                            }
                        });
                    }
                });
            }
            , handlePreview(file, fileList) {
                alert("handlePreview");
            }
            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            , changeImage(file, fileList) {
                this.fileList = fileList;
            },
            //修改图片状态
            updatestate(row) {
                var id = row.id;
                var sta = row.state;
                this.axios.get("/FeignBannerController/UpdState", {
                    params: {
                        state: sta,
                        id: id
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("修改失败")
                    } else {
                        this.$alert("修改成功")
                        this.axios.post("/FeignBannerController/QueryAllBanner", this.storeid).then(response => {
                            if (response.data == null) {
                                this.$alert("图片为空");
                            } else {
                                this.tableData = response.data;
                            }
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .lis li {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;
        display: inline-block;
    }

    .imgs {
        width: 100%;
        height: 100%;
    }
</style>